<!--高顺-->

<!DOCTYPE html>
<!-- suppress ThymeleafVariablesResolveInspection -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <!--    <link th:href="@{/static/layui/css/layui.css}" href="/static/layui/css/layui.css" rel="stylesheet" media="all">-->
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/js/gs/layui-v2.5.5/layui/css/layui.css"
          th:href="@{/static/js/gs/layui-v2.5.5/layui/css/layui.css}">

    <link rel="stylesheet" href="/static/css/gs/loginAndReg.css" th:href="@{/static/css/gs/loginAndReg.css}">
    <script th:src="@{/static/js/jquery/jquery.min.js}" src="/static/js/jquery/jquery.min.js"
            type="text/javascript"></script>
    <!--    <script th:src="@{/static/layui/layui.js}" src="/static/layui/layui.js" type="text/javascript"></script>-->
    <script src="/static/js/gs/zixie/loginAndReg.js" th:src="@{/static/js/gs/zixie/loginAndReg.js}"></script>
    <script src="/static/js/gs/zixie/jquery.cookie.js" th:src="@{/static/js/gs/zixie/jquery.cookie.js}"></script>
    <script th:src="@{/static/js/jquery-1.8.3.js}" src="/static/js/jquery-1.8.3.js"></script>
    <script th:src="@{/static/js/gs/zixie/jquery-1.10.2.min_65682a2.js}"
            src="/static/js/gs/zixie/jquery-1.10.2.min_65682a2.js"></script>

    <title>遮罩弹窗居中demo</title>
</head>

<style>
    #userPhone, #userPwd, #userName, #userPwd2, #phone2, #yz, #phonezz3 {
        width: 340px;
        height: 35px;
        margin-left: -40px;
    }

    #but23 {
        width: 300px;
        height: 50px;
    }

    #yz {
        margin-top: -26px;
        margin-left: -117px;
    }
</style>
<body>
<div id="code">
    <a id="guanbi">X</a>
    <div class="goodtxt">
        <span id="deng"><a style="color: red" id="deng1">登录</a></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
            id="zhu"><a id="zhu1">注册</a></span>
    </div>
    <div id="denglu">
        <div id="cc">
            <input type="text" id="userPhone" name="userPhone" placeholder="请输入您的手机号或者163邮箱" onblur="check1()"/><br/>
            <span style="display: none;color: red" id="phonezz">手机号或邮箱有误</span><br/>
            <input type="password" id="userPwd" name="userPwd" placeholder="请输入登录密码" onblur="pwdCheck()"/><br/>
            <span style="display: none;color: red" id="pwdzz">密码不能为空</span><br/>
            <span id="ck_u"><input type="radio" id="ck_user" name="c1" value="用户登录"> 用户登录 <input type="radio"
                                                                                                 id="ck_teacher"
                                                                                                 name="c1" value="讲师登录"> 讲师登录</span><br/>
            <span id="xzk"><input type="radio" id="ck_rmbUser"> 记住账号和密码？</span>
            <span id="wangji"><a style="color: #53C6EE;" href="/user/forgetpwd" target="_top">忘记密码？</a></span><br/>
            <button type="button" class="layui-btn layui-btn-radius" id="but">立即登录</button>
        </div>
    </div>


</div>

<div id="zhuce">
    <div id="dd">
        <input type="text" placeholder="请输入昵称" id="userName" onblur="userNameCheck()"><br/>
        <span style="display: none;color: red" id="userNamezz2">用户名不能为空</span><br/>

        <input type="text" id="phone2" name="phone2" placeholder="请输入您的手机号" onblur="check2()"/><br/>
        <span style="display: none;color: red" id="phonezz2">手机号已经被注册</span>
        <span style="display: none;color: red" id="phonezz3">手机号有误</span><br/>

        <input type="password" placeholder="请输入密码" id="userPwd2" onblur="pwdCheck2()"><br/>
        <span style="display: none;color: red" id="userpwdzz">密码不能为空</span><br/>

        <input type="text" id="yz" name="yz" placeholder="请输入验证码" style="width: 140px" height="10px"
               onblur="yanzhengmaCheck()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" class="btn" id="code1" value="获取验证码" onclick="codeButton()"><br/>
        <span id="yanzhengma" style="display: none;color: red">验证码输入错误</span>
        <span style="display: none;color: red" id="yanz">验证码不能为空</span><br/>
        <br/>
        <button type="button" class="layui-btn layui-btn-radius" id="but23">立即注册</button>
    </div>
</div>
<br/>
<span id="dsf">第三方登录： &nbsp;&nbsp;&nbsp;<a id="qqd"><img src="/static/image/gs/qq.jpg" style="width: 25px" height="20px"
                                                         title="QQ登录"></a></span>
</div>


<script>
    // 高顺------------------------------------------------------------------------
    // 点击注册触发的事件
    // $("#ck_u input:radio").click(
    //     function()
    //     {
    //         alert($(this).val());
    //     });

    $("#but2").click(function () {
        $.ajax({
            url: '/user/comparecode',
            type: 'post',
            dataType: 'json',
            data: {
                userName: $("#userName").val(),
                code: $("#yz").val(),
                userPhone: $("#phone2").val(),
                userPwd: $("#userPwd2").val()
            }, success: function (msg) {
                if (msg == 3) {
                    $("#denglu").css("display", "inline");
                    $("#zhuce").css("display", "none");
                    $("#deng1").css("color", "red");
                    $("#zhu1").css("color", "black");
                } else {
                    $("#yanzhengma").css("display", "inline");
                }
            }
        });
    });
    $("#deng").click(function () {
        $("#denglu").css("display", "block");
        $("#zhuce").css("display", "none");
        $("#deng1").css("color", "red");
        $("#zhu1").css("color", "black");
    });

    $("#zhu").click(function () {
        $("#denglu").css("display", "none");
        $("#zhuce").css("display", "block");
        $("#deng1").css("color", "black");
        $("#zhu1").css("color", "red");
    });

    // 点击注册触发的事件

    $("#but23").click(function () {
        if (check2() == true && pwdCheck2() == true && userNameCheck() == true && yanzhengmaCheck() == true) {
            $.ajax({
                url: '/user/comparecode',
                type: 'post',
                dataType: 'json',
                data: {
                    userName: $("#userName").val(),
                    code: $("#yz").val(),
                    userPhone: $("#phone2").val(),
                    userPwd: $("#userPwd2").val()
                }, success: function (flag) {
                    console.log("flag=" + flag);
                    if (flag == 3) {
                        $("#denglu").css("display", "inline");
                        $("#zhuce").css("display", "none");
                        $("#deng1").css("color", "red");
                        $("#zhu1").css("color", "black");
                    } else if (flag == 2) {
                        $("#yanzhengma").css("display", "inline");
                        return false;
                    }
                }
            });
        } else {
            if (yanzhengmaCheck() == false) {
                $("#phonezz2").html("手机号有误");
            }
            if (userNameCheck() == false) {
                $("#userNamezz2").css("display", "inline");
            }
            if (pwdCheck2() == false) {
                $("#userpwdzz").css("display", "inline");
            }
            if (check2() == false) {
                $("#yanz").css("display", "inline");
            }
        }
    });

    // 高顺
    // 验证手机号和邮箱是否正确   begin
    function chenkPhone(phone) {
        if (!(/^1[3456789]\d{9}$/.test(phone))) {
            return false;
        } else {
            return true;
        }
    }

    var checkPhone = false;
    // 验证手机号和邮箱是否正确   end
    // 登录手机号邮箱验证
    function check1() {
        var phone = $("#userPhone").val();
        if (chenkPhone(phone) == true) {
            // $("#phonezz").css("display", "none");
            $.ajax({
                url: '/user/phoneIsRegYesOrNo',
                dataType: 'json',
                type: 'post',
                data: {
                    userPhone: $("#userPhone").val()
                }, success: function (data) {
                    if (data.msg == "ok") {
                        $("#phonezz").css("display", "none");
                        checkPhone = true;
                        return checkPhone;
                    } else {
                        $("#phonezz").css("display", "inline");
                        $("#phonezz").html("该手机号还未注册或已被禁用！");
                        checkPhone = false;
                        return checkPhone;
                    }
                }
            });
            return checkPhone;
        } else {
            $("#phonezz").css("display", "inline");
            return false;
        }
    }

    // 注册-手机号邮箱验证
    function check2() {
        var phone = $("#phone2").val();
        if (phone != '') {
            if (chenkPhone(phone) == true) {
                $.ajax({
                    url: '/user/selectPhoneOrEmail',
                    dataType: 'json',
                    type: 'post',
                    data: {
                        userPhone: $("#phone2").val()
                    },
                    success: function (data) {
                        var msg = data[0];
                        console.log("msg=" + msg);
                        if (msg == "1") {
                            $("#phonezz2").css("display", "inline");
                        } else if (msg == "2") {
                            $("#phonezz2").css("display", "none");
                            $("#phonezz3").css("display", "none");
                        }
                    }
                });
                $("#phonezz2").css("display", "none");
                return true;
            } else {
                $("#phonezz2").css("display", "none");
                $("#phonezz3").css("display", "inline");
                return false;
            }
        } else {
            $("#phonezz2").css("display", "none");
            $("#phonezz3").css("display", "inline");
            return false;
        }
    }

    //登录密码验证
    function pwdCheck() {
        var userPwd = $("#userPwd").val()
        if (userPwd == '') {
            $("#pwdzz").css("display", "inline");
            return false;
        } else {
            $("#pwdzz").css("display", "none");
            return true;
        }
    }


    //注册密码验证

    function pwdCheck2() {
        var userPwd2 = $("#userPwd2").val()
        if (userPwd2 == '') {
            $("#userpwdzz").css("display", "inline");
            return false;
        } else {
            $("#userpwdzz").css("display", "none");
            return true;
        }
    }

    // 昵称验证
    function userNameCheck() {
        var userName = $("#userName").val();
        if (userName == '' || userName == "请输入昵称") {
            $("#userNamezz2").css("display", "inline");
            return false;
        } else {
            $("#userNamezz2").css("display", "none");
            return true;
        }
    }

    //验证码验证
    function yanzhengmaCheck() {
        var yz = $("#yz").val()
        if (yz == '') {
            $("#yanz").css("display", "inline");
            return false;
        } else {
            $("#yanz").css("display", "none");

            return true;
        }
    }


    $(document).ready(function () {
        if ($.cookie("rmbUser") == "true") {
            $("#ck_rmbUser").attr("checked", true);
            $("#user-account").val($.cookie("username"));
            $("#user-password").val($.cookie("password"));
        }
    });

    //记住用户名密码
    function save() {
        if ($("#ck_rmbUser").is(':checked')) {
            var str_username = $("#user-account").val();
            var str_password = $("#user-password").val();
            $.cookie("rmbUser", "true", {expires: 7}); //存储一个带7天期限的cookie
            $.cookie("username", str_username, {expires: 7});
            $.cookie("password", str_password, {expires: 7});
        } else {
            $.cookie("rmbUser", "false", {expire: -1});
            $.cookie("username", "", {expires: -1});
            $.cookie("password", "", {expires: -1});
        }
    }


    var guanbi = function () {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    };

    $("#guanbi").click(function () {
        guanbi();
    });

    // 获取验证码按钮
    function codeButton() {
        var code = $("#code1");
        code.attr("disabled", "disabled");
        setTimeout(function () {
            code.css("opacity", "0.8");
        }, 100)
        var time = 60;
        var set = setInterval(function () {
            code.val("(" + --time + ")秒后重新获取");
        }, 1000);
        setTimeout(function () {
            code.attr("disabled", false).val("重新获取验证码");
            clearInterval(set);

        }, 60000);

        huyzm();
    }

    //点击获取验证码按钮后触发的事件
    var huyzm = function () {
        $.ajax({
            url: '/user/regUserHqYzm',
            type: 'post',
            dataType: 'json',
            data: {
                userPhone: $("#phone2").val(),

            }, success: function (data) {

            }
        })
    };


    // 登录按钮
    $("#but").click(function () {
        var a = $("input[name='c1']:checked").val();
        if (a != null && a != '') {
            if (a == "用户登录") {
                var phoned = $("#userPhone").val();
                var pwdd = $("#userPwd").val();
                if (phoned == '' || pwdd == '') {
                    alert("有各别项为空，不能进行登录！请输入后重试！");
                    return false;
                } else {
                    if (checkPhone == true && pwdCheck() == true) {
                        $.ajax({
                            url: '/user/phoneLoginDes',
                            type: 'post',
                            dataType: 'json',
                            data: {
                                gphone: $("#userPhone").val(),
                                password: $("#userPwd").val()
                            }, success: function (data) {
                                // var isSuccess=msg["user"];
                                // alert("pwd="+isSuccess.userName);   //在js中获取controller传来的值
                                if (data.msg = "ok") {
                                    guanbi();
                                    return true;
                                } else if ((data.msg) == "该用户没有注册！") {
                                    // window.open("/user/toIndexUpdatePhone", "_top");
                                    alert('该用户没有注册或已被禁用，请检查后重新登陆！');
                                    return false;
                                }
                            }
                        })
                    } else {
                        if (check1() == false) {
                            $("#phonezz").css("display", "inline");
                            $("#phonezz").html("手机号输入有误");
                            alert("手机号错误");
                            return false;
                        }
                        if (pwdCheck() == false) {
                            $("#pwdzz").css("display", "inline");
                            $("#pwdzz").html("密码输入有误");
                            return false;
                        }
                    }

                    return true;
                }
            } else if (a == "讲师登录") {
                $.ajax({
                    url: '/teacherPhoneLoginDes',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        gphone: $("#userPhone").val(),
                        password: $("#userPwd").val(),
                    }, success: function (data) {
                        // var isSuccess=msg["user"];
                        // alert("pwd="+isSuccess.userName);   //在js中获取controller传来的值
                        if ((data.msg) == "该用户不是讲师用户！") {
                            alert("该用户不是讲师用户！请确认手机号/邮箱/密码是否正确");
                        } else {
                            window.open("/teacherIndex2", "_top");
                        }
                    }
                })
            }
        } else {
            alert("请选择登录方式(讲师还是用户)!")
        }

    });
    // 高顺------------------------------------------------------------------------
</script>
</body>
</html>